<template>
    <a-modal v-model:open='open' :maskClosable="false" :title="$t('重置密码')" @ok='handleOk' @cancel="handleClose">
        <p>{{ $t('重置用户') }} <span class="red-color"> {{ target.email }}</span></p>
        <a-form ref="formDatasRef" :model="formDatas" :rules="rules" layout="vertical">
            <a-row :gutter="24">
                <a-col class="gutter-row" :span="12">
                    <a-form-item :label="$t('密码')" prop="password">
                        <a-input v-model:value="formDatas.password" type="password" :placeholder="$t('请输入密码')" />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                    <a-form-item :label="$t('确认密码')" prop="confirmPassword">
                        <a-input v-model:value="formDatas.confirmPassword" type="password"
                            :placeholder="$t('请输入密码')" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <div class="tips">
            {{ $t("密码规则") }}
            <div>{{ $t("字符数量") }}
            </div>
            <div> {{ $t("字符强度") }}
            </div>
        </div>
        <template #footer>
            <a-button key="back" @click="handleClose">{{ $t('关闭') }}</a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">{{
                $t('保存') }}</a-button>
        </template>
    </a-modal>
</template>
<script lang='ts' setup>
import { computed, defineEmits, ref, defineProps } from 'vue';
import { isStrongPassword } from '@/utils/validate'
import { useI18n } from 'vue-i18n';
import { resetPassword } from '@/api/user/index'
import { AES_ECB_ENCRYPT } from '@/utils/encrypt'
import { message } from 'ant-design-vue';
const emit = defineEmits(['ok', 'close', 'update:visible'])
const { t: $t } = useI18n();
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
        default: false
    },
    target: {
        type: Object,
        required: true,
        default: () => {}
    }
})
const loading = ref<boolean>(false)
const formDatasRef = ref()
const isEqual = function (rule, value, callback) {
    if (value) {
        if (value !== formDatas.value.password) {
            return Promise.reject($t('密码不一致'))
        }
        else {
            return Promise.resolve();
        }
    }
    else {
        return Promise.reject($t('请输入'))
    }
}
const strongPassword = function (rule, value, callback) {
    if (value) {
        if (!isStrongPassword(value)) {
            return Promise.reject($t("密码强度"))
        }
        else {
            return Promise.resolve();
        }
    }
    else {
        return Promise.reject($t('请输入'))
    }
}
const rules = {
    password: [
        { required: true, validator: strongPassword, trigger: ['blur', 'change'] },
    ],
    confirmPassword: [
        { required: true, validator: isEqual, trigger: ['change', 'blur'] }
    ],
};
let formDatas = ref({
    password: '',
    confirmPassword: "",
})
const open = computed({
    get() {
        return props.visible
    },
    set(value) {
        emit('update:visible', value)
    }
})
const handleOk = () => {
    formDatasRef.value
        .validate()
        .then(async () => {
            loading.value = true
            const newPassword = formDatas.value.password
            const data = {
                password: AES_ECB_ENCRYPT(newPassword, props.target.email)
            }
            await resetPassword(props.target.uuid,data).finally(() => {
                loading.value = false
            })
            message.success($t('操作成功'))
            ok()
        })
        .catch((error: any) => {
        });
}
const resetForm = () => {
    formDatasRef.value.resetFields();
};
const clearValidates = () => {
    formDatasRef.value.clearValidate();
};
const ok = () => {
    clearValidates()
    resetForm()
    emit('ok', open.value = false)
}
const handleClose = () => {
    resetForm()
    clearValidates()
    emit('update:visible', false)
}
</script>
<style lang='scss' scoped>
$--primary-color: #18a689;

.ant-modal-content {

    .ant-input:active,
    .ant-input:hover {
        border-color: $--primary-color !important;
    }

    .red-color {
        color: red;
    }

    .tips {
        font-size: 12px;

        div {
            text-indent: 1em;
        }
    }

    .saveButton {
        background-color: $--primary-color;
        color: #fff;
    }

    .saveButton:active {
        color: #fff !important;
        border-color: #fff !important;
    }
}
</style>